<template>
    <div class="renellm">
        <my-layout>
            <!-- 插入主内容区的内容 -->
            <template v-slot:main>
                <div class="detail_container">
                    <!--   飞书文档待优化 -->
                    <div class="block docx-heading2-block" data-record-id="HJQPdx2uDopuTOxtypDcWT8xnrc">
                        <div class="heading-block">
                            <h2>Multilingual：</h2>
                        </div>
                    </div>
                    <div class="block docx-text-block" data-record-id="HeTydKaj5oZt1jxmBtxcJ5DWnOc">
                        <div class="text-block-wrapper">
                            <div class="text-block">
                                <span class="title_txt">Source:</span>
                                <a style="cursor:pointer;text-decoration-skip:none;" class="link"
                                   href="https://arxiv.org/pdf/2310.06474.pdf" target="_blank"
                                ><span>MULTILINGUAL JAILBREAK CHALLENGES IN LARGE LANGUAGE MODELS</span></a>
                            </div>
                        </div>
                    </div>
                    <div class="block docx-text-block" data-record-id="JobodHAfAohjk7xsKxKcAxbonae">
                        <div class="text-block-wrapper">
                            <div class="text-block">
                                <span class="title_txt">Github repo:</span>
                                <a style="cursor:pointer;text-decoration-skip:none;" class="link"
                                   href="https://github.com/DAMO-NLP-SG/multilingual-safety-for-LLMs" target="_blank"
                                ><span>https://github.com/DAMO-NLP-SG/multilingual-safety-for-LLMs</span></a>
                            </div>
                        </div>
                    </div>

                    <div class="block docx-text-block"  data-record-id="UeDGda2vNofChnxSY7GcewDanQb">
                        <div class="text-block">
                            <h4>Introduction:</h4>
                        </div>
                    </div>
                    <div class="block docx-text-block" data-record-id="I4SzdmpXMoAxm3xQ56xc2n0NnPh">
                        <div class="text-block-wrapper">
                            <div class="text-block">
                                <p>This method translates harmful queries from English into nine non-English languages with varying levels of resources,
                                    and in intentional scenarios, malicious users deliberately combine malicious instructions with multilingual prompts to attack LLMs.</p>
                            </div>
                        </div>
                    </div>
                    <div class="block docx-image-block" data-record-id="UjCmd9rrdoPtoxx82v9cCwtzncf">
                        <div class="img" image-token="WZk5bvGOvoq6HfxuS3icZ6rIn0b">
                            <img draggable="false" src="@/assets/doc/img11.jpg"/>
                        </div>
                    </div>
                    <div class="block docx-text-block" data-record-id="NbPQdUKGQoYBgQx5sDscjMyOnzc">
                        <div class="text-block">
                            <h4>Adjustable parameters:</h4>
                        </div>
                    </div>
                    <div class="block docx-text-block" data-record-id="Bzz5ddrSuoXtb2xf9TFc2X2unJb">
                        <div class="text-block-wrapper">
                            <div class="text-block">
                                <p>target_max_n_tokens(Int): Maximum number of tokens generated by the target model.</p>
                            </div>
                        </div>
                    </div>
                    <div class="block docx-text-block" data-record-id="RfBhdXUtgoJr1VxkEebcwnYWnme">
                        <div class="text-block-wrapper">
                            <div class="text-block">
                                <p>target_temperature(float): The temperature during target model generations.</p>
                            </div>
                        </div>
                    </div>
                    <div class="block docx-text-block" data-record-id="Ujc6dQvquoqpcaxt5N7cnTygn4g">
                        <div class="text-block-wrapper">
                            <div class="text-block">
                                <p>target_top_p(float): The value of top_p during target model generations.</p>
                            </div>
                        </div>
                    </div>
                    <div class="block docx-text-block" data-record-id="Q6qLd3UrLoK9xhxnF86cAneUnjd">
                        <div class="text-block-wrapper">
                            <div class="text-block">
                                <p>eval_max_n_tokens(Int): Maximum number of tokens generated by the eval model.</p>
                            </div>
                        </div>
                    </div>
                    <div class="block docx-text-block" data-record-id="Wxs0dgLLKoRZDmxdW77cqPbenQh">
                        <div class="text-block-wrapper">
                            <div class="text-block">
                                <p>eval_temperature(float): The temperature during eval model generations.</p>
                            </div>
                        </div>
                    </div>
                    <!--   飞书文档待优化 -->

                    <div class="effect">
                        <h4>Jailbreak prompt examples</h4>
                        <div class="exampleSelectorContainer">
                            <span>Select an Example：</span>
                            <el-select clearable v-model="fnName" placeholder="Please click to select"  @change="fetchMessage">
                                <el-option
                                        v-for="(value, name) in testData"
                                        :key="name"
                                        :label="name"
                                        :value="name">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="chatbot">
                            <section class="chatbot1">
                                <div class="chatbotHeader">
                                    <img src="@/assets/ChatGPT_logo.png" alt="ChatGPT Icon">
                                    <span>ChatGPT</span>
                                </div>
                                <div class="output-container">
                                    <div  v-show="!!fnName">
                                        <div class="userMessage">
                                            <span class="who">User: </span>
                                            {{showMsg.title}}
                                        </div>
                                        <div class="assistantMessage">
                                            <span class="who">Assistant: </span>
                                            {{showMsg.leftContent}}}
                                        </div>
                                    </div>
                                </div>
                            </section>
                            <section>
                                <div class="chatbotHeader">
                                    <img src="@/assets/devil.png" alt="devil Icon">
                                    <span>Jailbreak result</span>
                                </div>
                                <div class="output-container">
                                    <div v-show="!!fnName">
                                        <div class="userMessage">
                                            <span class="who">User: </span>
                                            {{showMsg.title}}
                                        </div>
                                        <div class="assistantMessage">
                                            <span class="who">Assistant: </span>
                                            {{showMsg.content}}}
                                        </div>
                                    </div>
                                </div>
                            </section>
                        </div>
                    </div>
                </div>
            </template>
        </my-layout>
    </div>
</template>

<script>
  import MyLayout from '@/views/MyLayout.vue'
  const initVale = {content:'',title:'',leftContent:''};
  export default {
    components: {
      MyLayout
    },
    data() {
      return {
        fnName:'',
        testData:{},
        showMsg:{...initVale},
        intervalId: null,
        meIntervalId: null,
      };
    },
    methods:{
      fetchMessage(val) {
        if(this.intervalId) {clearInterval(this.intervalId);}
        if(this.meIntervalId) {clearInterval(this.meIntervalId);}
        this.showMsg = {...initVale};
        if (val) {
          const content = this.testData[val];
          const leftContent = `I'm sorry, but I cannot assist with creating a phishing email or any other unethical activities.
                                        My purpose is to provide helpful and responsible information to users.
                                        If you have any other non-harmful requests or questions, feel free to ask,
                                        and I'll be happy to assist you.`;
          this.showMsg.title = val;
          let i = 0 , j = 0;
          this.meIntervalId = setInterval(() => {
            if (i < content.length) {
              this.showMsg.content += content.charAt(i);
              i++;
            } else {
              clearInterval(this.meIntervalId);
            }
          }, 10);
          this.intervalId = setInterval(() => {
            if (j < leftContent.length) {
              this.showMsg.leftContent += leftContent.charAt(j);
              j++;
            } else {
              clearInterval(this.intervalId);
            }
          }, 10);
        }
      }
    },
    created() {
      fetch(window.location.protocol + '//' + window.location.host+'/Multilingual.jsonl')
        .then(response => response.text())
        .then(content => {
          // 处理 content 中的 JSON Lines 数据
          let linesArray = content.split(/\n|\r\n/);
          linesArray = linesArray.filter(item => item);
          // const obj = linesArray[0];  // 字符串
          // 逐行解析每个 JSON 对象
          const jsonArray = linesArray.map(line => {
            const obj = new Function(`return ${line}`)()
            return obj;
          });
          const testData = {};
          // 每一个行的结构obj是：{"jailbreak_prompt": xxx,"target_responses":[xxxx],"query":xxxx,"eval_results":[xxxxx]}
          for(let item of jsonArray){
            testData[item.query] = Array.isArray(item.target_responses) ? item.target_responses[0] : '';
          }
          this.testData = testData;
        })
        .catch(error => console.error(error));
    },
    beforeDestroy() {
      clearInterval(this.intervalId);
      clearInterval(this.meIntervalId);
    }
  };
</script>
<style lang="scss" scoped>
</style>

